<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>example</title>
		<link rel="stylesheet" type="text/css" href="../build/bootstrap/css/bootstrap.css" />
		<script src="../build/jquery/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/*.row>div {
				border-right: 1px solid hotpink;
				border-top: 1px solid lightseagreen;
				background: #cef;
			}
			
			.row>div:hover {
				background: #C4E3F3;
			}*/
		</style>
	</head>

	<body>
		<div class="container">
			<form>
				<div class="form-group col-sm-12">
					<input type="text" class="form-control" value="text" />
					<input type="password" class="form-control" value="password" />
					<input type="datetime" class="form-control" value="2017-1-1" />
					<input type="datetime-local" class="form-control" value="2017-12-01T01:01" />
					<input type="date" class="form-control" value="2017-01-01" />
					<input type="month" class="form-control" value="2017-01" />
					<input type="time" class="form-control" value="01:01" />
					<input type="week" class="form-control" value="2017-W01" />
					<input type="number" class="form-control" value="2017" />
					<input type="email" class="form-control" value="335121817@qq.com" />
					<input type="url" class="form-control" value="http://localhost/index.html" />
					<input type="search" class="form-control" value="google" />
					<input type="tel" class="form-control" value="13372481946" />
					<input type="color" class="form-control" value="#66ccff" />
					<textarea class="form-control" rows="3"></textarea>
				</div>
				<div class="form-group col-sm-12">
					<div class="checkbox">
						<label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
					</div>
					<div class="checkbox disabled">
						<label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
					</div>

					<div class="radio">
						<label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
					</div>
					<div class="radio">
						<label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
					</div>
					<div class="radio disabled">
						<label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
					</div>
				</div>
				<div class="form-group">
					<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
					<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
					<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

					<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
					<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
					<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
				</div>
				<div class="form-group">
					<div class="checkbox">
						<label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
					</div>
					<div class="radio">
						<label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
					</div>
				</div>
				<div class="form-group">
					<select class="form-control">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select>
					<select multiple="multiple" class="form-control">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select>
				</div>
			</form>
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
						<p class="form-control-static">email@example.com</p>
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword" class="col-sm-2 control-label">Password</label>
					<div class="col-sm-10">
						<input type="password" class="form-control" id="inputPassword" placeholder="Password">
					</div>
				</div>
			</form>
			<form class="form-inline">
				<div class="form-group">
					<label class="sr-only">Email</label>
					<p class="form-control-static">email@example.com</p>
				</div>
				<div class="form-group">
					<label for="inputPassword2" class="sr-only">Password</label>
					<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
				</div>
				<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
				<button type="submit" class="btn btn-default">Confirm identity</button>
			</form>
			<form>
				<fieldset disabled="disabled">
					<div class="form-group">
						<label for="disabledTextInput">Disabled input</label>
						<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
					</div>
					<div class="form-group">
						<label for="disabledSelect">Disabled select menu</label>
						<select id="disabledSelect" class="form-control">
							<option>Disabled select</option>
						</select>
					</div>
					<div class="checkbox">
						<label>
        <input type="checkbox"> Can't check this
      </label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
					<a href="#" class="btn btn-danger">danger</a>
				</fieldset>
				<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
			</form>
			<form>
				<div class="form-group">
					<label class="sr-only" for="inputHelpBlock">Input with help text</label>
					<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> ...
					<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
					<hr />
					<div class="form-group has-success">
						<label class="control-label" for="inputSuccess1">Input with success</label>
						<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
						<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
					</div>
					<div class="form-group has-warning">
						<label class="control-label" for="inputWarning1">Input with warning</label>
						<input type="text" class="form-control" id="inputWarning1">
					</div>
					<div class="form-group has-error">
						<label class="control-label" for="inputError1">Input with error</label>
						<input type="text" class="form-control" id="inputError1">
					</div>
					<div class="has-success">
						<div class="checkbox">
							<label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
						</div>
					</div>
					<div class="has-warning">
						<div class="checkbox">
							<label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
						</div>
					</div>
					<div class="has-error">
						<div class="checkbox">
							<label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
						</div>
					</div>
				</div>
			</form>
			<form>
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputSuccess2">Input with success</label>
					<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess2Status" class="sr-only">(success)</span>
				</div>
				<div class="form-group has-warning has-feedback">
					<label class="control-label" for="inputWarning2">Input with warning</label>
					<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
					<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
					<span id="inputWarning2Status" class="sr-only">(warning)</span>
				</div>
				<div class="form-group has-error has-feedback">
					<label class="control-label" for="inputError2">Input with error</label>
					<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
					<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
					<span id="inputError2Status" class="sr-only">(error)</span>
				</div>
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
					<div class="input-group">
						<span class="input-group-addon">@</span>
						<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
					</div>
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
				</div>
			</form>
			<form class="form-horizontal">
				<div class="form-group has-success has-feedback">
					<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
					<div class="col-sm-9">
						<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
						<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
						<span id="inputSuccess3Status" class="sr-only">(success)</span>
					</div>
				</div>
				<div class="form-group has-success has-feedback">
					<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
					<div class="col-sm-9">
						<div class="input-group">
							<span class="input-group-addon">@</span>
							<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
						</div>
						<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
						<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
					</div>
				</div>
			</form>
			<form class="form-inline">
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputSuccess4">Input with success</label>
					<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess4Status" class="sr-only">(success)</span>
				</div>
			</form>
			<form class="form-inline">
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
					<div class="input-group">
						<span class="input-group-addon">@</span>
						<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
					</div>
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
				</div>
			</form>
			<form>
				<div class="form-group has-success has-feedback">
					<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
					<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess5Status" class="sr-only">(success)</span>
				</div>
				<div class="form-group has-success has-feedback">
					<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
					<div class="input-group">
						<span class="input-group-addon">@</span>
						<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
					</div>
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
				</div>
			</form>
			<form>
				<input class="form-control input-lg" type="text" placeholder=".input-lg">
				<input class="form-control" type="text" placeholder="Default input">
				<input class="form-control input-sm" type="text" placeholder=".input-sm">

				<select class="form-control input-lg">
					<option value="">.input</option>
				</select>
				<select class="form-control">
					<option value="">.input</option>
				</select>
				<select class="form-control input-sm">
					<option value="">.input</option>
				</select>
			</form>
			<form class="form-horizontal">
				<div class="form-group form-group-lg">
					<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
					<div class="col-sm-10">
						<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
					<div class="col-sm-10">
						<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
					</div>
				</div>
			</form>
			<div class="row">
				<div class="col-xs-2">
					<input type="text" class="form-control" placeholder=".col-xs-2">
				</div>
				<div class="col-xs-3">
					<input type="text" class="form-control" placeholder=".col-xs-3">
				</div>
				<div class="col-xs-4">
					<input type="text" class="form-control" placeholder=".col-xs-4">
				</div>
				<div class="col-xs-3">
					<input type="text" class="form-control" placeholder=".col-xs-3">
				</div>
			</div>
			<div class="row">
				<a class="btn btn-default" href="#" role="button">Link</a>
				<button class="btn btn-default" type="submit">Button</button>
				<input class="btn btn-default" type="button" value="Input">
				<input class="btn btn-default" type="submit" value="Submit">
				<!-- Standard button -->
				<button type="button" class="btn btn-default">（默认样式）Default</button>

				<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
				<button type="button" class="btn btn-primary">（首选项）Primary</button>

				<!-- Indicates a successful or positive action -->
				<button type="button" class="btn btn-success">（成功）Success</button>

				<!-- Contextual button for informational alert messages -->
				<button type="button" class="btn btn-info">（一般信息）Info</button>

				<!-- Indicates caution should be taken with this action -->
				<button type="button" class="btn btn-warning">（警告）Warning</button>

				<!-- Indicates a dangerous or potentially negative action -->
				<button type="button" class="btn btn-danger">（危险）Danger</button>

				<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
				<button type="button" class="btn btn-link">（链接）Link</button>
				<p>
					<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
					<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
					<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
					<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
					<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
					<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
					<button type="button" class="btn btn-default btn-lg active">Button</button>
					<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
					<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
					<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
					<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
					<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
					<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
				</p>
			</div>
		</div>
	</body>

</html>